<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>小米商城</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <style>
        .danpin .main .mingxing:nth-of-type(5n+1){border-top: 1px solid orange;margin-right:14px;}
        .danpin .main .mingxing:nth-of-type(5n+2){border-top: 1px solid green;margin-right:14px;}
        .danpin .main .mingxing:nth-of-type(5n+3){border-top: 1px solid blue;margin-right:14px;}
        .danpin .main .mingxing:nth-of-type(5n+4){border-top: 1px solid red;margin-right:14px;}
        .danpin .main .mingxing:nth-of-type(5n+5){border-top: 1px solid teal;}
    </style>
</head>
<body>
<div class="banner_x center">
    <%--<a href="./index.html" target="_blank"><div class="logo fl"></div></a>
    <a href=""><div class="ad_top fl"></div></a>--%>
    <div class="nav fl">
        <ul id="navUl">
            <li>
                <img src="${pageContext.request.contextPath}/img/logel.png">
            </li>
            <c:forEach items="${sessionScope.allLimit}" var="obj" >
                <li>
                    <input type="hidden" readonly value="${obj.get("typeid")}">
                    <a>${obj.get("typename")}</a>
                </li>
            </c:forEach>
        </ul>
    </div>
    <div class="search fr">
        <%--<form action="" method="post">--%>
            <div class="text fl">
                <input type="text" class="shuru" id="shuru" placeholder="">
            </div>
            <div class="submit fl">
                <input type="submit" class="sousuo" id="sousuo" value="搜索"/>
            </div>
            <div class="clear"></div>
        <%--</form>--%>
        <div class="clear"></div>
    </div>
</div>
<!-- end banner_x -->

<!-- start banner_y -->
<div class="banner_y center">
    <div class="layui-carousel" id="test10">
        <div carousel-item="">
            <div><img src="${pageContext.request.contextPath}/img/lb11.png"></div>
            <div><img src="${pageContext.request.contextPath}/img/lb12.png"></div>
            <div><img src="${pageContext.request.contextPath}/img/lb13.png"></div>
            <div><img src="${pageContext.request.contextPath}/img/lb14.png"></div>
            <div><img src="${pageContext.request.contextPath}/img/lb15.png"></div>
        </div>
    </div>
</div>
<!-- end banner -->
<div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >企业网站模板</a></div>

<!-- start danpin -->
<div class="danpin center">
    <div class="biaoti center">书籍单品</div>
    <div class="main center" style="height: auto" id="spzs">
        <c:forEach items="${sessionScope.allBook}" var="obj" >
            <div class="mingxing fl dgsp" style="margin-top: 5px;margin-right: 10px">
                <div class="sub_mingxing"><a <%--href=""--%>><img src="${obj.get("url")}" alt=""></a></div>
                <div class="pinpai"><a <%--href=""--%>>${obj.get("bookname")}</a></div>
                <div class="youhui">${obj.get("remark")}</div>
                <div class="jiage">${obj.get("price")}</div>
                <input type="hidden" id="bookid" name="bookid" value="${obj.get("bookid")}">
            </div>
        </c:forEach>
        <div class="clear"></div>
    </div>
</div>
</body>

<script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['carousel','form','jquery'], function(){
        var carousel = layui.carousel
        var form = layui.form;
        var $ = layui.jquery;
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '1226px'
            ,height: '460px'
            ,interval: 2000
            ,anim:'fade'
        });

        function showbook(){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/book/showBook',
                dataType:'json',//预期的后台数据类型
                success:function (data) {

                    $("#spzs .dgsp").click(function () {
                        //alert($(this).children("input").val()); //取到 点击的这个 div 的 bookid 的值
                        $.ajax({
                            type:'post',
                            url:'${pageContext.request.contextPath}/book/showBookByBookid',
                            data:{"bookid":$(this).children("input").val()},
                            //dataType:'json',//预期的后台数据类型
                            success:function (data) {
                                window.location.href='${pageContext.request.contextPath}/showbookxq.jsp';
                            }
                        })
                    })
                }
            })
        }

        function showtype(){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/book/showTyid',
                dataType:'json',//预期的后台数据类型
                success:function (data) {

                    $("#navUl li").click(function () {
                        //alert($(this).children("input").val());  //取到 点击的这个 li 的 typeid 的值
                        $.ajax({
                            type:'post',
                            url:'${pageContext.request.contextPath}/book/showBookBytypeid',
                            data:{"typeid":$(this).children("input").val()},
                            dataType:'json',//预期的后台数据类型
                            success:function (data) {
                                window.location.href='${pageContext.request.contextPath}/xiangqing.jsp';
                                /*if (data.code == "1001"){
                                    layer.alert(data.msg, {icon: 1});
                                }*/
                            }
                        })
                    })

                }
            })
        }

        $(function () {
            showbook();
            showtype();
        })


        $("#sousuo").click(function () {
            if ($("#shuru").val() == ""){

            }else {
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath}/book/selectSomeBookBybookname',
                    data:{"bookname":$("#shuru").val()},
                    //dataType:'json',//预期的后台数据类型
                    success:function (data) {
                        window.location.href='${pageContext.request.contextPath}/search.jsp';
                        //alert(JSON.stringify(data));
                    }
                })
            }
        })

    });
</script>
</html>
